Bootsrap alapok

Bevezető

Úgy gondolod már tudod az alapokat egy weboldalkészítéssben? Tudsz magadtól csinálni CSS szabályokat? Akkor itt a remek alkalom, hogy megismerd a Bootsrap keretrendszert!

A Bootsrap egy CSS/Javascript-re alapuló Front-End keretrendszer mely lényegében sok száz css Class segítségével gyorsabban haladhatsz és megelőzheted az unalmas hosszú CSS szabályok létrehozását. DRY!

A letöltése sokféleképpen megoldható, ezt a következő blokkban meg is találhatod.

ITT az eredeti Bootstrap részletes dokumentációt is megtalálhatod.

Letöltés

Ezen linken letudod tölteni a Javasript és a CCS fájlt majd betudod illeszteni egyből a weboldaladba.

Ha kevés a tárhelyed vagy bármi egyéb indokból nem tudod letölteni, használd a JSDeliver oldalán lévő autómatikusan frissítődő Bootsrap keretrendszerét. az egész annyiból áll hogy csak két sort be kell illesztened a weboldaladba és rögtön használhatod is!

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

Szöveg igazítása

A szöveg igazítása osztályok segítségével könnyedén igazíthatja a szöveget a komponensekhez. A kezdő-, vég- és középre igazításhoz reszponzív osztályok állnak rendelkezésre, amelyek ugyanazokat a nézetablak-szélesség töréspontokat használják, mint a rácsrendszer.

<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>
<p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>

Színek

Jelentést közvetíthet a színeken keresztül egy maroknyi színhasználati osztály segítségével. Tartalmazza a lebegő állapotú linkek formázásának támogatását is.

Szinezési kódok

Szín neve

Szín kódja

.blue

#0d6efd

.indigo

#6610f2

.purple

#6f42c1

.pink

#d63384

.red

#dc3545

.orange

#fd7e14

.yellow

#ffc107

.green

#198754

.teal

#20c997

.cyan

#0dcaf0

Jó tudni! ezeket a szövegedbe bármikor beletudod illeszteni a class megadásával, akár háttérszín lehet akár szövegszín!

Konténerek

A konténerek a Bootstrap alapvető építőkövei, amelyek tartalmazzák, kitöltik és igazítják a tartalmat egy adott eszközön vagy nézetablakon belül.

Hogyan működnek?

A konténerek a Bootstrap legalapvetőbb elrendezési elemei, és az alapértelmezett rácsrendszer használatakor szükségesek. A konténerek a bennük lévő tartalom befogadására, kitöltésére és (néha) középre helyezésére szolgálnak. Bár a konténerek egymásba ágyazhatók, a legtöbb elrendezés nem igényel egymásba ágyazott konténert.

Alap konténer

Az alapértelmezett .container osztályunk egy reszponzív, fix szélességű konténer, ami azt jelenti, hogy a maximális szélessége minden töréspontnál változik.

Reszponzív konténer

A reszponzív konténerek lehetővé teszik egy olyan osztály megadását, amely 100%-os szélességű a megadott töréspont eléréséig, majd ezt követően minden egyes magasabb töréspontra max-szélességet alkalmazunk. Például a .container-sm kezdetben 100%-os szélességű, amíg el nem éri az sm töréspontot, ahol az md, lg, xl és xxl méretezéssel növekszik.

Szegélyek

A szegélyek a beállíthatók, törölhetők, színezhetők, kerekíthetők.

Megadó

Elvonó

border

border-0

.border-top

.border-top-0

.border-right

.border-right-0

.border-bottom

.border-bottom-0

.border-left

.border-left-0

Színezés

Lekerekítés

.border .border-primary

.rounded

.border .border-secondary

.rounded-top

.border .border-success

.rounded-right

.border .border-danger

.rounded-bottom

.border .border-warning

.rounded-left

.border .border-info

.rounded-circle

.border .border-light

.rounded-0

border .border-dark

.border .border-white

Jó tudni!ezeket a szövegedbe bármikor beletudod illeszteni a class megadásával.

Ikonok

Az ikonok BootStrap-ben, verzionként változik.

BootStrap 3

Az ikonok használatához a glyphicon osztályra van szükségünk. Ez az osztály csak a bootstrap 3-as verzióig támogatott, a 4-es verzióban már nem használhatjuk. Természetesen az ikonokat több elemre is rá lehet tenni, például gombokra. Ilyenkor az ikont <span></span> elemre tesszük

<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span> Keresés</button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-play"></span> Lejátszás</button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-new-window"></span> Új ablak</button>

BootStrap 5

BootStrap 5-ben az ikonokat (NPM-eket) letöltjük vagy belinkeljük.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

A már letöltött vagy belinkelt ikonokat használhatjuk, akár színezve is.

Fejléc

Kisebbb fejléc

Szöveg között

Akár linkekben is

<h1><i class="bi-alarm"></i> Fejléc</h1>
<h3><i class="bi-alarm" style="color: rgb(205, 226, 19);"></i> Kisebbb fejléc</h3>
<p>Szöveg<i class="bi-alarm" style="color: rgb(180, 20, 20);"></i> között</p>
<p><a href="https://github.com/twbs/icons/releases/tag/v1.8.3">Akár linkekben is <i class="bi-alarm"></i></a></p>
<button type="button"><i class="bi-apple"></i> Ja ez egy gomb</button>

Jó tudni! az ikonok sokoat segíthetnek a weboldalon való navigációban.

A Bootsrap verziói között sok változtatás van, a legfontosabb a reszponzívitásért (layout manager) felelős részét megjegyezni. A többit verzionként változhat, de az egyszerű osztály jelölőkből is érdemes párat tudni, mert megkönnyitheti az életedet. A többi csak részlet kérdése.